<template>
	<view>
		<!-- 导航栏 -->
		<view class="header-fit-box" :style="'padding-top: '+ StatusBar +'px;'">
			<view class="header-fit" :style="{'height':(CustomBar-StatusBar) +'px'}">
				<image @click="back" class="back" src="@/static/home/subpage/back_black.png"></image>
				<text class="text">财经日历</text>
				<view class="item" @click="sharefix">
					<text class="li">分享</text>
				</view>
			</view>
		</view>
		<view :style="{'height':CustomBar +'px'}" style="border-bottom:2rpx solid #F6F7F9;"></view>
		<view class="navbar-box">
			<view class="box">
				<view class="li active">数据</view>
				<view class="li">事件</view>
				<view class="li">假期</view>
			</view>
		</view>
		<view class="calendar-box">
			<view class="calendar">
				<view class="col-fix" v-for="(date, index) in weekDates" :key="index">
					<view class="col" :class="{'active':date.day == day&&date.month == month&&date.year == year}" @click="check(date.year,date.month,date.day)">
						<text>{{ date.day }}</text> <!-- 渲染日期的日 -->
						<text>{{ getWeekday(date.dayOfWeek) }}</text> <!-- 渲染对应的星期几 -->
					</view>
				</view>
			</view>
			<view class="calendar-right" @click="monthCalendar">
				<image :hidden="ismonthCalendar" src="@/static/home/subpage/icn_blue.png"></image>
				<image :hidden="!ismonthCalendar" src="@/static/home/subpage/drop-blue.png"></image>
			</view>
			<view class="month-box" :hidden="!ismonthCalendar">
				<z-calendar :showYearControl="false" v-model="checkDate" @on-selected="monthcheck"></z-calendar>
			</view>
		</view>
		<mescroll-uni :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :height="scrollHeight">
			<view class="content">
				<view class="row" v-for="(item,index) in 10" @click="getchart">
					<view class="title">中国10月财新综合PMI</view>
					<view class="sub">
						<text>前值 50.2</text>
						<text>预期值 --</text>
						<text>公布值 --</text>
					</view>
					<view class="date">
						<image mode="aspectFill" src="@/static/logo.png"></image>
						<text>2023-11-3 11:25:25</text>
					</view>
				</view>
			</view>
		</mescroll-uni>
		
		<view v-if="!!ismyChart" class="chart-bar" @touchmove.stop.prevent>
			<view class="shade"></view>
			<view class="chart-bar-box">
				<view class="group-bar">
					<view class="title">中国至11月3日外购仔猪养殖利润(元/头)</view>
					<view class="subtab">
						<view class="li">
							<view class="yellow-bg"></view>
							<text>预测</text>
						</view>
						<view class="li">
							<view class="blue-bg"></view>
							<text>公布</text>
						</view>
					</view>
					<view class="qiun-charts">
						<l-echart ref="barChart" @finished="barInit"></l-echart>
					</view>
					<view class="sub-date">
						<text>2023-07-11</text>
						<text>2023-07-11</text>
					</view>
				</view>
				<view class="close" @click="closechart"><icon type="cancel" color="#ffffff" size="32"/></view>
			</view>
		</view>
		<share-fix :isshare="isshare" :animationData="animationData" @closesharefix="closesharefix"></share-fix>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import * as echarts from '@/utils/echarts.min.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				animationData: {},
				animation:{},
				isshare: false,
				weekDates: [], // 存储一周的日期和星期几
				currentDate: new Date(),
				dayOfWeek:new Date().getDay(),
				year: new Date().getFullYear(),
				month:new Date().getMonth() + 1,
				day:new Date().getDate(),
				scrollHeight:'0px',
				checkDate: new Date(),
				ismonthCalendar:false,
				ismyChart: false,
				barOption:{}
			};
		},
		onLoad(options){
				this.getweek(new Date());
				var dw = uni.getSystemInfoSync().windowWidth;
				var hw = uni.getSystemInfoSync().windowHeight;
				var scale = dw/750;
				if(dw>950) this.scrollHeight = hw-(this.CustomBar+122)+'px';
				else this.scrollHeight = hw-(this.CustomBar+(244*scale))+'px';
		},
		onReady(){
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				this.animation =animation;
		},
		methods:{
			barInit() {
				this.barOption={
					color: 'rgba(0,0,0,0.45)',
					grid: {
						right: '0',
						left:'0',
						top:'40',
						bottom:'10',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['2023-07-11', '2023-07-11', '2023-07-11', '2023-07-11', '2023-07-11', '2023-07-11', '2023-07-11', '2023-07-11'],
						axisTick: {
							show: false
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
								width: 1,
							}
						},
						axisLabel: {
							show: false
						}	
					},
					yAxis: {
						axisLine: {
							show: false,
							lineStyle: {
								color: 'rgba(0,0,0,0.45)',
							}
						},
						axisLabel: {
							show: true,
							formatter: '{value}'
						},
					},
					series: [
						{
							data: [-120, -200, -150, -80, -70, -110, -130, -130],
							type: 'bar',
							barWidth:'12',
							itemStyle:{
								color:'#356FE5'
							},
						}
					]
				};
				this.$refs.barChart.init(echarts, chart=> {
					chart.setOption(this.barOption);
				});
			},
			sharefix(){
				this.isshare= true;
				this.animation.translateY(0).step();
				this.animationData = this.animation.export();
			},
			closesharefix(){
				this.isshare= false;
				this.animation.translateY("100%").step();
				this.animationData = this.animation.export();
			},
			getchart(){
				this.ismyChart =true;
			},
			closechart(){
				this.ismyChart =false;
			},
			back(){
				uni.navigateBack();
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				setTimeout(()=>{
					this.mescroll.endSuccess(9,false);// 加载成功
					// this.mescroll.hideUpScroll();
				},1500)
				//联网失败, 结束加载
				// this.mescroll.endErr();
			},
			getweek(currentDate){
				var weekDate =[];
				// 获取一周的日期只要日和星期几
				for (let i = 0; i < 7; i++) {
					let day = new Date(currentDate);
					day.setDate(currentDate.getDate() + i);
					let dayOfWeek = day.getDay();
					let formattedDate = {
						year: day.getFullYear(),
						month: day.getMonth() + 1,
						day: day.getDate(),
						dayOfWeek: dayOfWeek
					};
					weekDate.push(formattedDate);
					this.weekDates =weekDate;
				}
			},
			getWeekday(dayOfWeek) {
				// 根据数字获取对应的星期几
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return weekdays[dayOfWeek];
			},
			// 获取下周的日期
			nextCalendar(){
				var nextWeek = new Date();
				var start = this.currentDate.getTime()/1000;
				var end = start + (60*60*24*7);
				nextWeek = new Date(parseInt(end) * 1000);
				this.currentDate =nextWeek;
				this.getweek(nextWeek);
			},
			check(year,month,day){
				this.year =year;
				this.month =month;
				this.day =day;
				this.checkDate = new Date(`${year}-${month}-${day}`);
				console.log(this.year,this.month,this.day);
				uni.navigateTo({
					url: '/pages/homeSubpage/finance/finance'
				});
			},
			monthCalendar(){
				this.ismonthCalendar =!this.ismonthCalendar;
			},
			monthcheck(){
				this.year= this.checkDate.getFullYear();
				this.month= this.checkDate.getMonth() + 1;
				this.day= this.checkDate.getDate();
				this.getweek(this.checkDate);
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #F4F5F7;
}
.navbar-box{
	padding: 24rpx;
	background-color: #fff;
	z-index:3;
	position: relative;
	.box{
		display: flex;
		align-items: center;
		width: 100%;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding:4rpx;
		box-sizing: border-box;
	}
	.li{
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
		flex:1;
		text-align: center;
		height:100%;
		line-height: 72rpx;
	}
	.li.active{
		background-color: #fff;
		font-weight: bold;
		color: rgba(0,0,0,0.8);
		border-radius: 16rpx;
	}
}
.calendar-box{
	background: #F4F5F7;
	padding-top:16rpx;
	z-index:3;
	position: relative;
	.month-box{
		position: absolute;
		left:0;top:116rpx;
		// height:626rpx;
		width:100%;
		background-color: #fff;
		z-index: 4;
		padding:32rpx;
		box-sizing: border-box;
	}
}
.calendar{
	background-color: #fff;
	// display: flex;
	// align-items: center;
	// justify-content: space-between;
	height:100rpx;
	white-space: nowrap;
	overflow-x: auto;
	padding-right:100rpx;
	.col-fix{
		// flex:1;
		width: 107rpx;
		height: 100%;
		padding:12rpx 0;
		box-sizing: border-box;
		display: inline-block;
		vertical-align: top;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		color: rgba(0,0,0,0.8);
		.col{
			width: 76rpx;
			height: 76rpx;
			margin:0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			box-sizing: border-box;
			& text:first-child{
				font-size: 28rpx;
			}
			& text:last-child{
				font-size: 20rpx;
			}
		}
		.col.active{
			border: 2rpx solid #EE5953;
			background: #FFF8F8;
			border-radius: 8rpx;
			color: #EE5953;
		}
	}
}
.calendar-right{
	position: absolute;right:0;top:16rpx;
	width: 100rpx;
	height: 100rpx;
	background: #FFFFFF;
	box-shadow: -8rpx 0 8rpx 2rpx rgba(0,0,0,0.04);
	text-align: center;
	& image{
		width:48rpx;height:48rpx;
		margin-top:26rpx;
	}
}
.content{
	padding:24rpx;
	.row{
		width:100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding:24rpx;
		margin-top:24rpx;
		box-sizing: border-box;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: #356FE5;
		}
		.sub{
			margin-top:24rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: rgba(0,0,0,0.6);
			& text{
				width: 30%;
			}
		}
		.date{
			margin-top:32rpx;
			font-size: 24rpx;
			color: rgba(0,0,0,0.6);
			display: flex;
			align-items: center;
			& image{
				width: 52rpx;
				height: 32rpx;
				margin-right:24rpx;
			}
		}
	}
	.row:first-child{
		margin-top:0;
	}
}
.chart-bar-box{
	position: fixed;
	left:50%;top:50%;
	transform: translate(-50%,-50%);
	z-index: 100;
	.group-bar{
		width: 654rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding:48rpx 32rpx 98rpx;
		box-sizing: border-box;
		.title{
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			text-align: center;
		}
		.subtab{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top:56rpx;
			.li{
				display: flex;
				align-items: center;
				.yellow-bg{
					width: 40rpx;
					height: 20rpx;
					background: #FFA200;
					border-radius: 4rpx;
				}
				.blue-bg{
					width: 40rpx;
					height: 20rpx;
					background: #356FE5;
					border-radius: 4rpx;
				}
				& text{
					padding-left:8rpx;
					font-size: 20rpx;
					color: rgba(0,0,0,0.8);
				}
			}
			.li:last-child{
				margin-left:48rpx;
			}
		}
		.qiun-charts{
			width:590rpx;
			height:440rpx;
		}
		.sub-date{
			font-size: 20rpx;
			color: rgba(0,0,0,0.45);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 26rpx 0 66rpx;
			margin-top:10rpx;
		}
	}
	.close{
		width: 64rpx;
		height: 64rpx;
		margin:32rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

</style>
